<template>
  <h1>Home</h1>
  <p>
    简单的前后端分离例子，使用Springboot, Vue, Element-plus
  </p>
  <div v-if="jwt.isLogin">
    <h2>欢迎：{{ jwt.user.username }}</h2>
    <el-button @click="logout">
      退出
    </el-button>
  </div>
  <dif v-else>
    <p>未登录用户，不能使用学生管理功能。</p>
    <el-button @click="login">
      用户登录
    </el-button>
  </dif>
  <login-dialog
    ref="login"
  />
</template>

<script>
// import Login from './LoginDialog.vue'
import LoginDialog from "./LoginDialog.vue";
import {jwt} from "../utils/jwt.js";

export default {
  name: "Home",
  components: {LoginDialog},
  data() {
    return {
      jwt
  }
},
  methods: {
    login() {
      this.$refs.login.handleLogin()
    },
    logout() {
      this.jwt.logout()
    }
  }
}
</script>

<style scoped>

</style>